<template>
    <div class="BannerHead">
        <div class="BannerHead-1">
            <div class="BannerHead-top">
                <div class="HotListHead-top">
                    <div class="HotListHead-top-1">
                        <div class="HotListHead-top-left">
                            <van-icon name="arrow-left" />
                        </div>
                        <div class="HotListHead-top-right">
                            <van-icon name="share-o" />
                            <van-icon name="shopping-cart-o" badge="5" />
                        </div>
                    </div>
                </div>
            </div>
            <div class="BannerHead-bot">
                <img src="image/Banner/BannerHead-top-1.png" alt="">
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "BannerHead"
}
</script>

<style scoped>
.BannerHead-1{
    width: 100%;
}
.BannerHead-bot {
    width: 100%;
    height: .50rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #e0f8fd;
}
.BannerHead-bot img{
    width: 2.60rem;
    height: .36rem;
    object-fit: cover;
}
.HotListHead-top{
    width: 100%;
    position: fixed;
    top:0;
    z-index:520;
}
.HotListHead-top-1{
    padding: .19rem .12rem 0 .20rem;
    margin-bottom: .24rem;
}
.HotListHead-top-1 i{
    color:#fff;
    font-size: .20rem;
}
.HotListHead-top-right i:nth-child(2){
    margin-left:.17rem;
}
.HotListHead-top-1{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: .40rem;
}
.BannerHead-top{
    height: 2.47rem;
    background-repeat: no-repeat;
    background-image: url("/image/Banner/BannerHead-top-bg.jpg");
    background-size: cover;
}
</style>